<template>
  <div>
    <nav-text><span slot="navText">当前位置: 数据中心 > 数据查询 > 仪器状态</span></nav-text>
    <div class="searchBox">
      <div>
        <textBox>
          <span slot="titleName">仪 器 I D:</span>
          <input
            v-model="Ids"
            slot="textBox"
            class="textBoxSize"
            type="text"
            placeholder="请输入仪器ID"
          />
        </textBox>
      </div>
      <div>
        <selectBox>
          <span slot="titleName">仪器类型:</span>
          <el-select
            slot="selectBox"
            v-model="Types"
            clearable
            placeholder="请选择仪器类型"
          >
            <el-option
              v-for="item in TypeOption"
              :key="item"
              :value="item"
            >
            </el-option>
          </el-select>
        </selectBox>
      </div>
      <div>
        <selectBox>
          <span slot="titleName">运行状态:</span>
          <el-select
            slot="selectBox"
            v-model="Status"
            clearable
            placeholder="请选择运行状态"
          >
            <el-option
              v-for="item in StatusOption"
              :key="item"
              :value="item"
            >
            </el-option>
          </el-select>
        </selectBox>
      </div>
      <div class="layoutBtn">
        <div>
          <search-button>
            <el-button
              @click.stop="insStateTableData('1')"
              slot="searchBtn"
              type="success"
              size="mini"
            >查 询</el-button>
          </search-button>
        </div>
        <div>
          <download-button>
            <el-button
              slot="dounloadBtn"
              type="primary"
              icon='el-icon-upload2'
              circle
            ></el-button>
          </download-button>
        </div>
      </div>
    </div>
    <!-- 表格 -->
    <div class="tableBox">
      <el-table
        :header-cell-style="headStyle"
        :row-style="rowStyle"
        :cell-style="cellStyle"
        border
        :data="tableData"
        :fit="fit"
        :highlight-current-row='highlight'
      >
        <el-table-column
          show-overflow-tooltip
          align="center"
          prop="dataId"
          label="序 号"
          min-width="40"
        >
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          align="center"
          prop="ecode"
          label="仪 器 I D"
        >
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          align="center"
          prop="name"
          label="仪 器 名 称"
        >
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          align="center"
          prop="type"
          label="仪 器 类 型"
        >
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          align="center"
          prop="eStatus"
          label="运 行 转 态"
        >
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          align="center"
          prop="dName"
          label="所 在 医 院"
        >
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          align="center"
          prop="cName"
          label="负 责 人"
        >
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页器 -->
    <pagination>
      <el-pagination
       @current-change="insStateTableData"
        slot="pagination"
        background
        layout="prev, pager, next, jumper"
        :total="pagesTotal"
        :page-size='pagesSize'
        hide-on-single-page
      >
      </el-pagination>
    </pagination>
  </div>
</template>

<script>
import { insStateTableData } from "@/request/api.js";
import navText from "@/components/DataCenter/MyLocation/myLocation";
import textBox from "@/components/DataCenter/BaseForm/textBox";
import searchButton from "@/components/DataCenter/BaseForm/searchBtn";
import downloadButton from "@/components/DataCenter/BaseForm/downloadBtn";
import selectBox from "@/components/DataCenter/BaseForm/selectBox";
import dataSelectBox from "@/components/DataCenter/BaseForm/dateSelectBox";
import pagination from "@/components/baseCpn/pagination.vue";
import "@/assets/base/dataCenterTableStyle.css";
export default {
  components: {
    navText,
    textBox,
    searchButton,
    downloadButton,
    selectBox,
    dataSelectBox,
    pagination
  },
  mounted() {
    this.insStateTableData(this.$page);
    this.TypeOption = localStorage.getItem("instrumentList").split(",");
  },
  data() {
    return {
      pagesTotal: null,
      pagesSize: 8,
      highlight: true,
      fit: true,
      headStyle: {
        height: "7rem",
        backgroundColor: "#131428",
        color: "#FFFFFF",
        border: "1px solid #792a4c",
        fontSize: "1.9rem"
      },
      cellStyle: {
        height: "7rem",
        border: "1px solid #792a4c",
        fontSize: "1.8rem"
      },
      tableData: [],
      Ids: "",
      Types: "",
      Status: "",
      TypeOption: [],
      StatusOption: ["启用", "禁用"]
    };
  },

  methods: {
    //表格数据接口
    insStateTableData(pages) {
      insStateTableData({
        page: pages,
        pageSize: this.$pageSize,
        eCode: this.Ids,
        type: this.Types,
        status: this.Status
      })
        .then(res => {
          console.log("仪器状态-表格数据成功", res);
          this.pagesTotal = res.data.total;
          if (res.data.success) {
            this.tableData = res.data.rows;
            for (var i = 0; i < res.data.rows.length; i++) {
              this.tableData[i].dataId = (pages - 1) * 8 + 1 + i;
            }
          } else {
            this.$message.error({
              message: res.data.errorMsg
            });
          }
        })
        .catch(err => {
          console.log("仪器状态-表格数据失败", err);
        });
    },
    rowStyle(row) {
      if (row.rowIndex % 2 === 0) {
        return { backgroundColor: "#222644" };
      } else if (row.rowindex % 2 === 1) {
        return { backgroundColor: "#262b4b" };
      }
    }
  }
};
</script>

<style lang='scss' scoped>
.searchBox {
  width: 100%;
  height: 16rem;
  display: flex;
  div {
    flex: 1;
    display: flex;
    flex-direction: column;
  }
  .layoutBtn {
    display: flex;
    flex-direction: row;
    div {
      flex: 1;
      display: flex;
    }
  }
}
.tableBox {
  width: 95%;
  height: 63.5rem;
  margin: 0 auto;
  padding-top: 2rem;
  overflow: hidden;
}
</style>